<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="@/static/img/chat-09.png"></image>
				</view>
				<view class="title"></view>
				<image @click="add()" class="img" src="@/static/img/k_add.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="info">
			<view class="info_user">
				<image src="@/static/img/avatar.png" mode="widthFix"></image>
				<view class="info_text">
					<view>夜晚的星光</view>
					<view>
						<text>ID:0x228...f6954</text>
						<image src="@/static/img/me-03.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="info_data">
				<view class="info_data_item" @click="attention(true)">
					<view>2</view>
					<view>关注</view>
				</view>
				<view class="info_data_item" @click="attention(false)">
					<view>2</view>
					<view>粉丝</view>
				</view>
				<view class="info_data_item" @click="drafts()">
					<view>2</view>
					<view>草稿</view>
				</view>
				<view class="info_data_item" @click="msg()">
					<view>2</view>
					<view>消息</view>
				</view>
			</view>
		</view>

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="tab">
				<view class="tab_item" v-for="(item,i) in list" :class="tabIndex==i? 'tab_sel':''" @click="tab(i)">
					<view class="t_i_text">{{item}}</view>
					<view :class="tabIndex==i?'t_i_line':'t_i_line2'"></view>
				</view>
			</view>
			<view class="scroll">
				<scroll-view scroll-x="true" @scroll="scroll">
					<view class="tuijck" v-for="item in 10">
						<image src="@/static/img/avatar.png" mode="widthFix"></image>
						<view class="name">刘晓</view>
						<view class="btn">关注</view>
					</view>
				</scroll-view>
			</view>
			<view class="item" @click="details(item)" v-for="(item,i) in 5" :key="i" :class="true ?'aa': ''">
				<view class="item_top">
					<image src="@/static/img/avatar.png" mode="aspectFill"></image>
					<view class="item_name">
						<view>
						{{item.nickName || '121212'}}
						<image src="@/static/img/k_icon1.png" mode="widthFix"></image>
						<image src="@/static/img/k_icon2.png" mode="widthFix"></image>
						</view>
						<view>ID:12231541545</view>
					</view>
					<view class="del">
						<image src="@/static/img/k_icon3.png" mode="widthFix"></image>
						<view class="item_time">2023-11-10 12:36</view>
					</view>
				</view>
				<view class="warp">
					<view class="text" :class="true ? '' : 'ellipsis'" id="ellipsis_box">
						<!-- <span class="switch" v-if="!isOpen && !isShowBtn" @click.stop="handleSwitch()">全文</span>
					<span class="switch" v-if="isOpen && !isShowBtn" @click.stop="handleSwitch()">收起</span> -->
						<text>121454545</text>
					</view>
				</view>
				<view class="item_img" v-if="true">
					<!-- <image :src="(item.attachContent.split(',')).length>0?item.attachContent.split(',')[0]: ''"
					mode="aspectFill"></image>
				<image :src="(item.attachContent.split(',')).length>1?item.attachContent.split(',')[1]: ''"
					mode="aspectFill"></image>
				<image :src="(item.attachContent.split(',')).length>2?item.attachContent.split(',')[2]: ''"
					mode="aspectFill"></image> -->
					<image v-for="item2 in 3" src="@/static/logo.png" mode="aspectFill"></image>
				</view>
				<view class="comment">
					<image src="@/static/img/avatar.png" mode="widthFix"></image>
					<input type="text" placeholder="友善评论，文明发言" />
				</view>
				<view class="item_bottom">
					<view @click.stop="like(item.id,2,item.isCollect,i)">
						<image v-if="true" src="@/static/img/collect_y.png" mode="aspectFill"></image>
						<image v-else src="@/static/img/collect.png" mode="aspectFill"></image>
						<text>{{item.collect||0}}</text>
					</view>
					<view>
						<image src="@/static/img/comment.png" mode="aspectFill"></image>
						<text>50</text>
					</view>
					<view @click.stop="like(item.id,1,item.isLike,i)">
						<image v-if="true" src="@/static/img/good_y.png" mode="aspectFill"></image>
						<image v-else src="@/static/img/good.png" mode="aspectFill"></image>
						<text>12</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				imagelist: [
					'../../static/img/v0.png',
					'../../static/img/v1.png',
					'../../static/img/v2.png',
					'../../static/img/v3.png',
					'../../static/img/v4.png',
					'../../static/img/v5.png',
					'../../static/img/v6.png',
					'../../static/img/v7.png',
					'../../static/img/v8.png',
					'../../static/img/v9.png',
					'../../static/img/v10.png',
				],
				index: 1,
				tabIndex: 0,
				list: ['动态', '评论', '点赞', '收藏'],
			}
		},
		mixins: [navBarMixin],
		methods: {
			attention(e) {
				uni.navigateTo({
					url:'/pages/me/attention?type='+e
				})
			},
			tab(e) {
				this.tabIndex = e
			},
			back() {
				uni.navigateBack()
			},
			drafts() {
				uni.navigateTo({
					url: '/pages/me/drafts'
				})
			},
			record() {
				uni.navigateTo({
					url: '/pages/me/rechargeRecord'
				})
			},
			signin() {
				uni.navigateTo({
					url: '/pages/me/signin'
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/me/plazaAdd'
				})
			},
			msg() {
				uni.navigateTo({
					url: '/pages/me/message'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		position: relative;
		// overflow: hidden;
		height: 100vh;
		background-size: 100% 100%;
	}

	.head {
		position: fixed;
		z-index: 1;
		width: 100%;
		background: transparent;

		.head-np {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 96rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.back {
				image {
					width: 20rpx;
					height: 37rpx;
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: white;
			}

			.img {
				width: 50rpx;
			}
		}
	}

	.top_bg {
		width: 100%;
		display: block;
		// position: absolute;
		// top: 0;
		// left: 0;
	}

	.info {
		height: 448rpx;
		background-color: white;
		padding: 0 30rpx;
		// padding-top: 176rpx;
		background: url('@/static/img/k_bg.png') no-repeat;
		background-size: contain;
		white-space: nowrap;
		overflow: hidden;

		.info_user {
			margin-top: 176rpx;
			display: flex;
			align-items: center;

			>image {
				width: 104rpx;
				margin-right: 20rpx;
			}

			.info_text {
				view {
					&:nth-of-type(1) {
						font-weight: 500;
						font-size: 30rpx;
					}

					&:nth-of-type(2) {
						margin-top: 26rpx;
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: #6C6B6B;

						image {
							width: 42rpx;
							margin-left: 8rpx;
							margin-top: -6rpx;
						}
					}
				}
			}
		}

		.info_data {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			margin: 38rpx 30rpx 0;

			.info_data_item {
				view {
					&:nth-of-type(1) {
						font-weight: 500;
						font-size: 38rpx;
					}

					&:nth-of-type(2) {
						font-size: 30rpx;
						color: #666666;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.main {
		// margin-top: 176rpx;
		position: relative;
		// margin-top: -20rpx;
		z-index: 888;
		overflow: hidden;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		margin-bottom: 50rpx;

		.tab {
			// height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab_item {
				color: #999999;
				position: relative;
				font-size: 30rpx;

				.t_i_text {}

				.t_i_line {
					width: 34rpx;
					height: 4rpx;
					margin: 8rpx auto 0;
					background: #3F93FF;
					border-radius: 4rpx;

				}

				.t_i_line2 {
					width: 34rpx;
					height: 4rpx;
					margin: 8rpx auto 0;
					background: #ffffff;
					border-radius: 4rpx;
				}
			}

			.tab_sel {
				font-weight: 500;
				// font-size: 32rpx;
				color: #333333;
			}
		}

		.scroll {
			// width: 100vw;
			// height: 230rpx;
			white-space: nowrap;
			margin-top: 30rpx;
			// position: relative;

			.tuijck {
				width: 114rpx;
				text-align: center;
				margin-right: 74rpx;
				display: inline-block;

				image {
					display: block;
					width: 88rpx;
					margin: 0 auto;
				}

				.name {
					font-size: 28rpx;
					margin: 10rpx 0 20rpx;
				}

				.btn {
					width: 114rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;
					color: #58A1FF;
					text-align: center;
					border-radius: 42rpx;
					border: 1rpx solid #58A1FF;
				}
			}
		}

		.item {
			background-color: white;
			margin: 50rpx 0 0;

			:nth-of-type(1) {

				// box-shadow: inset 20rpx 20rpx 100rpx rgba(213,213,213, 0.5);
			}
		}

		.aa {
			// box-shadow: inset 20rpx 20rpx 100rpx rgba(213, 213, 213, 0.5);
		}

		.item_top {
			display: flex;
			align-items: center;
			position: relative;

			>image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.item_name {
				flex: 1;

				view {
					&:first-child {
						font-size: 30rpx;
						margin: 5rpx 0 14rpx 0;
						display: flex;
						align-items: center;
						image {
							width: 32rpx;
							margin-left: 10rpx;
						}
					}

					&:last-child {
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
			.del {
				text-align: right;
				image {
					width: 72rpx;
					display: block;
					margin-left: auto;
				}
			}

			.item_time {
				font-size: 24rpx;
				color: #999999;
				margin-top: 28rpx;
			}
		}
		
		.comment {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			image {
				width: 62rpx;
				display: block;
			}
			input {
				flex: 1;
				height: 52rpx;
				background: #F2F2F2;
				border-radius: 31rpx;
				margin-left: 20rpx;
				font-size: 26rpx;
				padding: 0 30rpx;
			}
		}

		.item_center>view {
			// display: -webkit-box;
			// -webkit-box-orient: vertical;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// -webkit-line-clamp: 2;
		}

		.warp {
			display: flex;
			font-size: 28rpx;
			margin-top: 20rpx;

			.ellipsis {
				// display: -webkit-box;
				// -webkit-line-clamp: 2;
				// -webkit-box-orient: vertical;
				// overflow: hidden;
			}

			.text {
				.switch {
					float: right;
					clear: both;
					color: #FF5E5E;
					margin-right: 10rpx;
				}

				text {
					line-height: 40rpx;
				}
			}

			.text::before {
				content: '';
				width: 0rpx;
				height: calc(100% - 35rpx);
				background-color: red;
				float: right;
			}
		}

		.item_img {
			display: flex;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 198rpx;
				border-radius: 8rpx;

				&:nth-of-type(2) {
					margin: 0 20rpx;
				}
			}
		}

		.item_bottom {
			border-bottom: 1rpx solid #eeeeee;
			padding-bottom: 30rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #666666;

			view {
				display: flex;
				align-items: center;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>